<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>First DApp Demo</title>

    <link rel="stylesheet" type="text/css" href="main.css">

    <script src="web3.min.js"></script>

</head>
<body>
    <div class="container">

        <h1> First DApp Demo</h1>

        <h2 id="info"></h2>

        <img id="loader" src="https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif">

        <label for="name" class="col-lg-2 control-label">姓名：</label>
        <input id="name" type="text">

        <label for="name" class="col-lg-2 control-label">年龄：</label>
        <input id="age" type="text">

        <button id="button">更新</button>


    </div>

    <script src="jquery.js"></script>

    <script>
       if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
        } else {
            // set the provider you want from Web3.providers
            web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
        }

        web3.eth.defaultAccount = web3.eth.accounts[0];

        var infoContract = web3.eth.contract([
	{
		"anonymous": false,
		"inputs": [
			{
				"indexed": false,
				"name": "name",
				"type": "string"
			},
			{
				"indexed": false,
				"name": "age",
				"type": "uint256"
			}
		],
		"name": "Instructor",
		"type": "event"
	},
	{
		"constant": false,
		"inputs": [
			{
				"name": "_fName",
				"type": "string"
			},
			{
				"name": "_age",
				"type": "uint256"
			}
		],
		"name": "setInfo",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "getInfo",
		"outputs": [
			{
				"name": "",
				"type": "string"
			},
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	}
]);

        var info = infoContract.at('0xcb02d3f1bf9fbe957f1969192f70787b0bffc3c3');

        var instructorEvent = info.Instructor();
       instructorEvent.watch(function(error, result){
            if (!error)
                {
                    $("#loader").hide();
                    $("#info").html(result.args.name + ' (' + result.args.age + ' years old)');
                } else {
                    $("#loader").hide();
                    console.log(error);
                }
        });

        $("#button").click(function() {
            $("#loader").show();
            info.setInfo($("#name").val(), $("#age").val(), function(error, result){
        	});
        });

    </script>

</body>
</html>